import React, { Component } from 'react';
import { withRouter, Link, Switch, Route, HashRouter as Router } from 'react-router-dom'
import { Tag, Icon, Button, DatePicker, message } from 'antd';

import "./../../static/specialMonitoring/infoList.styl"
import Table from "../tero/table"
import $ from 'jquery'
import u from "../../common";
const CheckableTag = Tag.CheckableTag;
const tagsTime = ['今日', '昨日', '近3日', '近7日', '自定义'];
const tagsTrend = ['全部', '已阅', '未阅'];
const { RangePicker } = DatePicker;


export default class InfoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTags: [],
      operation: ['导出', '研判', '删除', '加入样本库', '标记已阅'],
      flag: true,
      index: props.index,
      keyWord:"",
      infoList:true
    };
  }
  handleChange(tag, checked) {
    const { selectedTags } = this.state;
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter(t => t !== tag);
    this.setState({ selectedTags: nextSelectedTags });
  }
  // 获取关键词
  initialTopic = () => {
    u.topicList(data => {
      if (data.message !== undefined) {
        message.error(data.message);
      }
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].id == this.state.index) {
            this.setState({
              keyWord: data[i].area_key
            });
          }
        }
      }
    });

  };
  componentDidMount() {
    this.initialTopic();
    var that = this;
    $('.app-top-ullist').find('li:last-child').siblings().click(function () {
      that.setState({
        flag: true
      })
    })
  }
  render() {
    return (
      <div className="infoList-content app">
        <div className="app-header  app-headers">
          <div className="app-top  app-son">
            <ul className='app-top-ullist'>
              <li>时间：</li>
              <li>今日</li>
              <li>昨日</li>
              <li>近三日</li>
              <li>近七日</li>
              <li className={this.state.flag ? '' : 'activve'} onClick={() => {
                this.setState({
                  flag: false
                })
              }}>{this.state.flag ? '自定义' : <RangePicker
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm"
                placeholder={['Start Time', 'End Time']}
                onChange={this.onChangeDate}
                onOk={this.onOkDate}
              />}</li>
            </ul>
            <ul>
              <li>浏览倾向：</li>
              <li>全部</li>
              <li>已阅</li>
              <li>未阅</li>
            </ul>
          </div>
        </div>
        <div className='app-conter infoContent'>
          {this.state.keyWord && <Table operation={this.state.operation} keywords={this.state.keyWord} infoList={this.state.infoList} />}
        </div>
      </div>
    );
  }
}